import { useState, useRef, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  Card,
  Button, 
  Spin,
  Select,
  message
} from 'antd'

import * as Diff from 'diff';
import * as Diff2Html from 'diff2html';

import { marked } from "marked";
import DiffViewer from "react-diff-viewer";

const { Option } = Select;

// 添加项目
export default function AddProject () {
  const [isLoading, setIsLoading] = useState(false)

  const navigate = useNavigate()

  // 示例Markdown文本
  const markdown1 = `# 标题
  这是一个段落。

  #### 安装教程

1.  xxxx
2.  xxxx

  - 列表项1
  - 列表项2`;
  const markdown2 = `# 标题
  这是一个段落。

  #### 介绍

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx`;

  // 生成差异

  // // 将差异转换为HTML
  // const outputHtml = Diff2Html.html(diff, {
  //   inputFormat: 'diff',
  //   showFiles: true,
  //   matching: 'lines',
  //   highlight: true,
  //   outputFormat: 'side-by-side'
  // });

  return (
    <Card 
      title="文件比对" 
      extra={<Button onClick={() => navigate(-1) }>取消</Button>} 
      style={{ width: '100%' }}
    >
      <Spin spinning={ isLoading }>
        {/* {outputHtml} */}
        <div
          className="markdown-viewer"
          dangerouslySetInnerHTML={{ __html: marked(markdown2) }}
        />
        <DiffViewer
          oldValue={marked(markdown1)}
          newValue={marked(markdown2)}
          leftTitle={'左侧文件'}
          rightTitle={'右侧文件'}
          splitView={true}
          compareMethod="line"
          showDiffOnly={true}
        />
      </Spin>
    </Card>
  )
}